<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-white">
			<block slot="content">
				<view class="custom-title">碳管理</view>
			</block>
		</cu-custom>
		<view class="content">
			<view class="nav">
				<!-- 选项卡水平方向滑动，scroll-with-animation是滑动到下一个选项时，有一个延时效果 -->
				<scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
					<view class="tab-scroll_box">
						<!-- 选项卡类别列表 -->
						<view class="tab-scroll_item" v-for=" (item,index) in category" :key="index"  :class="isActive==index?'active':''" @click="chenked(index)">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 选项卡内容轮播滑动显示，current为当前第几个swiper子项 -->
			<swiper @change="change" :current="isActive" class="swiper-content" :style="fullHeight">
				<swiper-item class="swiperitem-content">
					<scroll-view scroll-y style="height: 100%;">
						<view class="padding-top-20 padding-left-32 padding-right-32 setMargin">
							<energy></energy>
							<view class="setBottom"></view>
						</view>
					</scroll-view>	
				</swiper-item>
				<swiper-item class="swiperitem-content">
					<scroll-view scroll-y style="height: 100%;">
						<view class="padding-top-12 padding-left-32 padding-right-32">
							<view class="text-centers">
								<image src="https://txr001.zthj.net/voucher_img/noData.png"></image>
								<view class="jqqds">暂无数据</view>
								<view class="open-descs">人员管理功能正在开发中……</view>
							</view>
						</view>
					</scroll-view>	
				</swiper-item>
				<swiper-item class="swiperitem-content">
					<scroll-view scroll-y style="height: 100%;">
						<view class="padding-top-12 padding-left-32 padding-right-32">
							<view class="text-centers">
								<image src="https://txr001.zthj.net/voucher_img/noData.png"></image>
								<view class="jqqds">暂无数据</view>
								<view class="open-descs">技术管理功能正在开发中……</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiperitem-content">
					<scroll-view scroll-y style="height: 100%;">
						<view class="padding-top-12 padding-left-32 padding-right-32">
							<view class="text-centers">
								<image src="https://txr001.zthj.net/voucher_img/noData.png"></image>
								<view class="jqqds">暂无数据</view>
								<view class="open-descs">资产管理功能正在开发中……</view>
							</view>
						</view>
					</scroll-view>	
				</swiper-item>
				<swiper-item class="swiperitem-content">
					<scroll-view scroll-y style="height: 100%;">
						<view class="padding-top-12 padding-left-32 padding-right-32">
							<view class="text-centers">
								<image src="https://txr001.zthj.net/voucher_img/noData.png"></image>
								<view class="jqqds">暂无数据</view>
								<view class="open-descs">供应链管理功能正在开发中……</view>
							</view>
						</view>
					</scroll-view>	
				</swiper-item>
				<swiper-item class="swiperitem-content">
					<scroll-view scroll-y style="height: 100%;">
						<view class="padding-top-12 padding-left-32 padding-right-32">
							<view class="text-centers">
								<image src="https://txr001.zthj.net/voucher_img/noData.png"></image>
								<view class="jqqds">暂无数据</view>
								<view class="open-descs">政策与风险功能正在开发中……</view>
							</view>
						</view>
					</scroll-view>	
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import energy from './energy.vue'
	export default {
		components:{energy},
		watch:{
			// swiper与上面选项卡联动
			currentindex(newval){
				this.isActive = newval;
				this.scrollLeft = 0;
				// 滑动swiper后，每个选项距离其父元素最左侧的距离
				for (let i = 0; i < newval - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
		},
		data() {
			return {
				// selTab:0,
				category:[
					{name:"数据管理",id:"1"},
					{name:"人员管理",id:"5"},
					{name:"技术管理",id:"2"},
					{name:"资产管理",id:"6"},
					{name:"供应链管理",id:"3"},
					{name:"政策与风险",id:"4"},
				],
				isActive: 0,
				index: 0,
				currentindex:0,
				contentScrollW: 0, // 导航区宽度
				scrollLeft: 0, // 横向滚动条位置
				fullHeight:"",	
			}
		},
		onLoad(option) {
			if(option.id){
				option.id ? this.isActive = option.id : 0
				for (let i = 0; i < Number(option.id) - 1; i++) {
					this.scrollLeft += 95
				};
			}
		},
		onHide() {
			this.scrollLeft=0
		},
		mounted(){
			// 获取标题区域宽度，和每个子元素节点的宽度
			this.getScrollW()
		},
		methods: {
			// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tab-scroll').boundingClientRect(data => {
					  // 拿到 scroll-view 组件宽度
					  this.contentScrollW = data.width
				 }).exec();
				 query.selectAll('.tab-scroll_item').boundingClientRect(data => {
					 let dataLen = data.length;
					  for (let i = 0; i < dataLen; i++) {
						  //  scroll-view 子元素组件距离左边栏的距离
						  this.category[i].left = data[i].left;
						 //  scroll-view 子元素组件宽度
						 this.category[i].width = data[i].width
					}
				 }).exec()
			},
			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
			chenked(index) {
				this.isActive = index;
				this.scrollLeft = 0;
				for (let i = 0; i < index - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
			// swiper滑动时，获取其索引，也就是第几个
			change(e){
				const {current} = e.detail;
				this.currentindex = current;
			}
		}
	}
</script>

<style scoped lang="less">
	.content{
		display: flex;
		flex-direction: column;
		width: 100%;
		flex: 1;
		.nav{
			border-top: 1rpx solid #f2f2f2;
			margin-top: 35rpx;	
			position: fixed;
			z-index: 999;
			width: 100%;
			align-items: center;
			height: 100rpx;
			background-color:#F5F5F5;
			.tab-scroll{
				flex: 1;
				overflow: hidden;
				box-sizing: border-box;
				padding-left: 30rpx;
				padding-right: 30rpx;
				.tab-scroll_box{
					display: flex;
					align-items: center;
					flex-wrap: nowrap;
					box-sizing: border-box;
					.tab-scroll_item{
						height: 50rpx;
						line-height: 50rpx;
						min-width: 190rpx;
						font-size: 32rpx;
						font-weight: 600;
						color: #010101;
						text-align: center;
					}
					.active {
						font-size: 32rpx;
						font-weight: 600;
						color: #FFFFFF;
						text-align: center;
						background-color: #010101;
						border-radius: 30rpx;
					}
				}
			}
		}
		.swiper-content{
			height: calc(100vh - 100rpx);
			   padding-top: 120rpx;
			.swiperitem-content{
				.nav_item{	
					padding:20rpx 40rpx 0rpx 40rpx ;
				}
			}
		}	
	}
	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	/deep/.uni-scroll-view::-webkit-scrollbar {
		display: none
	}
	.setBottom{
		height: 20rpx !important;
	}
	.setMargin{
		margin-top: 15rpx;
	}
</style>